<template>
	<div class="authenticator">
		<div class="iconfont" @click="goBack" >&#xe624;</div>
		<div class="avatar">
			<img :src="info.head_pic" height="100%" width="100%" />
		</div>
		<div class="info-con">
			<h2 class="title">{{info.zhName}}</h2>
			<p>认证：{{info.auth_info}}</p>
			<p>{{info.signature}}</p>
		</div>
		<div class="tuijian">
			<h3>推荐宝店客：{{info.zhName}}（{{info.userId}}）</h3>
		</div>
		<div class="link-btn">进去APP全面了解宝店客信息 ></div>
		<p class="desc">进入APP搜索宝店客服务码即可</p>
		<div class="demo-img">
			<img src="../../assets/images/coinShop/demo.png"  width="100%" />
			<div class="filter"></div>
		</div>
	</div>
</template>

<script>
	export default{
		name :'authenticator',
		data(){
			return{
				info : {}
			}
		},
		mounted(){
			this.info = JSON.parse(localStorage.getItem('relevance'))
		},
		methods:{
			goBack(){
				this.$router.go(-1)	
			}
		}
	}
</script>

<style lang="less" scoped>
	.authenticator{
		overflow: hidden;
		background: #fff;
		.iconfont{
			position: absolute;
			top: 1rem;
			left: .2rem;
			height: .5rem;
			width: .5rem;
			line-height: .5rem;
			text-align: center;
		}		
		.avatar{
			overflow: hidden;
			margin: 0 auto;
			margin-top: 1.24rem;
			margin-bottom: .4rem;
			height: 1.4rem;
			width: 1.4rem;
			border-radius: 50%;
		}
		.title{
			line-height: .7rem;
		}
		.tuijian{
			margin: .4rem 0;
		}
		.link-btn{
			margin: .4rem auto;
			width: 60%;
			height: .8rem;
			line-height: .8rem;
			color: #f01b55;
			border: .02rem solid #f01b55;
			border-radius: .5rem;
		}
		.desc{
			margin-top: .4rem;
			color: #a8a8a8;
		}
		.demo-img{
			position: relative;
			margin: 0 auto;
			margin-top: .4rem;
			width: 75%;
			box-shadow: 0 -2px 10px #ccc;
			.filter{
				z-index: 99;
				position: absolute;
				bottom: 0;
				left: -.5rem;
				width: 120%;
				height: 50%;
				background: linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
				background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
			}
		}
	}
</style>